<!--
*@Author: QWP
*@Description: 合作机构配置
*@Date 2024-09-19 14:08
-->
<template>
  <a-layout class="f-h-100">
    <u-table-header>
      <u-form
        :model="state.searchF.model"
        :gutter="16"
        :elements="searchEl"
        :isSearch="true"
        @formChange="getSearch(1)"
        class="f-w-auto">
        <a-col>
          <a-space>
            <u-icon-button
              itype="search"
              @click="getSearch(1)">
              查询
            </u-icon-button>
            <u-icon-button
              itype="export"
              @click="exportBtn">
              导出
            </u-icon-button>
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button
                itype="add"
                @click="toEdit">
                新增
              </u-icon-button>
              <u-icon-button
                itype="edit"
                @click="toEdit(2)">
                修改
              </u-icon-button>
              <u-icon-button
                itype="delete"
                @click="deleteBtn">
                删除
              </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-table-header>
    <u-table-content>
      <u-table
        :columns="state.columns"
        :data="state.tabData"
        :loading="loading"
        v-model:pagination="pagenation"
        :scroll="{ y: useTableScroll() }"
        @onDblclick="
          (record) => {
            state.keyid = record.keyid;
            state.showEdit = true;
          }
        "
        @onSelect="({ selectedRows }) => state.tabSelData.splice(0, state.tabSelData.length, ...selectedRows)"
        @change="getSearch()" />
    </u-table-content>

    <!-- 新增编辑 -->
    <Edit
      v-model:open="state.showEdit"
      title="机构编辑"
      :keyid="state.keyid"
      width="800px"
      @success="(state.showEdit = false), (state.keyid = ''), getSearch()"
      @close="(showEdit = false), (state.keyid = '')" />
  </a-layout>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch, useAttrs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useBaseStore, useLoginStore } from "@/store";
import { storeToRefs } from "pinia";
import { alertC, confirmC, nullC, numberC, isValue, jsonCopy, messageC } from "@/util/common";
import Edit from "./Edit.vue";
import { useTableScroll } from "@/hooks/useTable";
import * as cooprationApi from "@/service/administration/carCooperation";

const { MECHANISMTYPE } = storeToRefs(useBaseStore());

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: (total) => `共 ${total} 条`,
});

const searchEl = [
  {
    label: "机构业务",
    key: "mechanismname",
    element: "select",
    formItemProps: {
      labelWidth: "72px",
      style: {
        width: "250px",
      },
    },
    componentProps: {
      options: MECHANISMTYPE.value,
    },
  },
  {
    label: "关键字",
    key: "keywords",
    element: "input",
    formItemProps: {
      labelWidth: "60px",
      style: {
        width: "300px",
      },
    },
    componentProps: { placeholder: "机构名称、联系人" },
  },
];

const loading = ref<boolean>(false);

const state = reactive({
  searchF: {
    model: {
      keywords: null,
      cph: "",
    },
  },
  total: 0,
  loading: false,
  tabData: [],
  tabSelData: [],
  columns: [
    { align: "center", title: "序号", width: 50, customRender: ({ index }) => (index += 1) },
    { title: "机构名称", width: 200, dataIndex: "mechanismname", sortable: "custom" },
    { title: "机构业务", width: 120, dataIndex: "mechanismtypes", align: "center", sortable: "custom" },
    { title: "机构联系人", width: 120, dataIndex: "mechanismperson", align: "center", sortable: "custom" },
    { title: "机构联系电话", width: 160, dataIndex: "phone", align: "center", sortable: "custom" },
    { title: "开户银行", width: 160, dataIndex: "paybank" },
    { title: "银行账号", width: 160, dataIndex: "paycard", align: "center", sortable: "custom" },
    { title: "机构位置", width: 200, dataIndex: "address", sortable: "custom" },
    { title: "备注", width: 150, dataIndex: "remark", sortable: "custom" },
  ],

  showEdit: false,
  keyid: "",
});

onMounted(() => {
  getSearch();
});

// 列表查询
async function getSearch(current?: number) {
  if (current == 1) {
    pagenation.current = current;
  }

  state.searchF.current = pagenation.current;
  state.searchF.size = pagenation.pageSize;

  loading.value = true;
  try {
    const res = await cooprationApi.search(state.searchF);
    if (res.code == 0) {
      state.tabData = res.data.records;
      pagenation.total = res.data.total;
    }
  } catch (error) {}
  loading.value = false;
}

// 编辑
function toEdit(type?: number) {
  if (type == 2) {
    if (state.tabSelData.length !== 1) {
      messageC("能且只能选择一条数据进行修改!");
      return;
    }
    state.keyid = state.tabSelData[0].keyid;
  }
  state.showEdit = true;
}

// 删除
async function deleteBtn() {
  if (state.tabSelData.length == 0) {
    messageC("请先选择要删除的数据!", "warning");
    return;
  }

  loading.value = true;
  try {
    await alertC("确认删除选中的数据?", "confirm");

    let ids = state.tabSelData.map((item) => item.keyid);
    const res = await cooprationApi.del({ ids: ids.join(",") });
    if (res.code == 0) {
      getSearch();
      messageC(res.msg, "success");
    } else {
      messageC(res.msg, "warning");
    }
  } catch (error) {}

  loading.value = false;
}

// 导出
async function exportBtn() {
  loading.value = true;
  try {
    const res = await cooprationApi.download({ ...state.searchF, size: -1, filename: "车辆合作机构信息" });
  } catch (error) {}
  loading.value = false;
}
</script>
<style lang="scss"></style>
